<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import {useMessage} from "naive-ui";
import qs from "qs";
import router from "@/router";
import {loadingBar} from "../HomeView_N.vue"

const message = useMessage();

const loginUser = ref(getUser());

//定义全局变量,控制聊天消息位置
const index = ref(1);

const avatars = [
  "https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg",
  "https://avatars.githubusercontent.com/u/20943608?s=60&v=4",
  "https://avatars.githubusercontent.com/u/46394163?s=60&v=4",
  "https://avatars.githubusercontent.com/u/39197136?s=60&v=4",
  "https://avatars.githubusercontent.com/u/19239641?s=60&v=4",
  "头像.jpg"
];

//定义数组,保存根据UserId查到的userInfo
const userInfo = ref([]);

//定义函数,select查用户信息
const loadUser = ()=>{
  axios.get(BASE_URL+'/v1/user/select?'+loginUser.value.id).then((response)=>{
    if(response.data.code==2000){
      userInfo.value = response.data.data;
      console.log(userInfo.value);
      loadingBar.finish();
    }else{
      message.error("获取用户失败咯~");
    }
  })
}

//定义变量，存入前端输入的值发送给后端
const saveMessage = ref({
  message:'',
});

const insertMessage = ()=>{
  let data = qs.stringify(saveMessage.value);
  console.log(data);
  axios.post(BASE_URL+'/v1/user/insertMsg',data).then((response)=>{
    if(response.data.code==2000){
      message.success("发送消息成功！");
      saveMessage.value = {};
      loadUser();
    }else {
      message.error("发送失败！");
    }
  })
}

//一进入页面,就加载用户信息
onMounted(()=>{
  loadUser();
  console.log(userInfo.value);
})

const items = Array.from({ length: 1e2 }, (_, i) => ({
  key: `${i}`,
  value: i,
  avatar: avatars[i % avatars.length]
}));

</script>

<template>
  <div style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;opacity: 0.5">
    <img src="/background.webp">
  </div>
  <div ref="containerRef" style="width: 100%; padding: 20px 200px;box-sizing: border-box;">
    <n-flex style="margin-top: 20px;justify-content: center">
      <n-flex style="height: 80vh;width: 80%;padding: 0;gap: 0">
        <!-- 消息列表-->
        <n-card style="padding: 0;width: 22%;">
          <n-input :round="true" placeholder="搜索聊天"></n-input>
          <n-virtual-list style="max-height: 480px;margin-top: 20px;margin-right: 0" :item-size="42" :items="items">
            <template #default="{ item }">
              <div :key="item.key" class="item" style="height: 60px">
                <img class="avatar" :src="item.avatar" alt="">
                <span> {{ item.value }}</span>
              </div>
            </template>
          </n-virtual-list>
          <n-card :bordered="false">
            <n-flex vertical>
              <router-link to="/user" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);">
                <n-button quaternary style="width: 100%;">
                  个人中心
                </n-button>
              </router-link>
              <router-link to="/setting" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);">
                <n-button quaternary style="width: 100%;">
                  设置中心
                </n-button>
              </router-link>
              <router-link to="/order" style="text-decoration: none; color: var(--primary-color); transition: .3s var(--cubic-bezier-ease-in-out);">
                <n-button quaternary style="width: 100%;">
                  订单中心
                </n-button>
              </router-link>
            </n-flex>
          </n-card>
        </n-card>
        <n-card style="padding: 0;width: 75%;margin: 0;">
          <!--消息界面-->
<!--          重写一个数组保存头像          -->
          <div style="position: relative; top: 0">
            <n-virtual-list
                style="max-height: 550px"
                :item-size="42"
                :items="items"
                item-resizable
            >
              <n-list hoverable clickable>
                <!-- 头像-->

                  <n-list-item v-for="info in userInfo" >
                  <el-row :gutter="1">
                    <el-col :span="3">
                      <n-avatar
                          round
                          :size="70"
                          :src="info.avatarImgUrl"
                      />
                    </el-col>
                    <el-col :span="8">
                      <!-- 聊天气泡-->
                      <div style="height: 40%;font-size: 20px; font-family: 宋体;
                    color: #475669;padding: 10px; margin-top: 8px;background-color: #94ea68;
                    border-radius: 10px;float: left;">{{info.message}}</div>
                    </el-col>
                  </el-row>
                  </n-list-item>

              </n-list>



            </n-virtual-list>

          </div>
          <!--输入框-->
          <div style="position: absolute;top: 75%;width: 95%">
            <n-divider></n-divider>
            <n-flex>
              <n-input style="border-radius: 15px;height: 80px;width: 88%;margin-left: 30px" rows="4" type="textarea" placeholder="留下消息吧！" v-model:value="saveMessage.message" @keydown.enter="insertMessage">
              </n-input>
            </n-flex>
            <n-flex justify="right" style="margin-top: 10px;margin-right: 75px;">
              <n-button style="border-radius: 5px" @click="insertMessage">发送</n-button>
            </n-flex>
          </div>
        </n-card>
      </n-flex>
    </n-flex>
  </div>
</template>

<style scoped>
.item {
  display: flex;
  align-items: center;
}
.avatar {
  width: 52px;
  border-radius: 50%;
  margin-right: 10px;
}

</style>